<template>
  <div>
    <section class="TableList">
      <div class="button-view">
        <template v-if="noData">
          <a-button type="primary" @click="getMyBusiness" icon="cloud-download">获取数据</a-button>
          <a-button type="danger" disabled icon="redo">重置数据</a-button>
          <a-button type="primary" @click="getMyHtml" icon="redo">测试数据</a-button>
        </template>
        <template v-else>
          <a-button type="primary" disabled icon="cloud-download">获取数据</a-button>
          <a-button type="danger" @click="resetList" icon="redo">重置数据</a-button>
          <a-button type="primary" @click="showModal" icon="redo">测试数据</a-button>
        </template>
      </div>
      <a-divider orientation="left">业务列表</a-divider>
      <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300 }">
        <a slot="action" slot-scope="text" @click="openUrl(text)">查看</a>
      </a-table>
      <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
        <timeLineEx></timeLineEx>
      </a-modal>
    </section>
  </div>
</template>

<script>
import { getMyBusiness, getMyHtml } from '@/api/example/business'
const columns = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    sorter: true,
    width: '20%',
    scopedSlots: { customRender: 'projectName' },
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
    width: '20%',
  },
  {
    title: '学院',
    dataIndex: 'college',
    width: '20%',
  },
  {
    title: '时间',
    dataIndex: 'time',
    width: '20%',
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'appid',
    scopedSlots: { customRender: 'action' },
  },
]
import moment from 'moment'
import timeLineEx from '@/components/timeLineEX/timeLineEx'
export default {
  name: 'exampleTableList',
  components: { timeLineEx },
  data() {
    return {
      index: 0,
      data: [],
      visible: false, //模态框
      pagination: {
        showSizeChanger: true,
      },
      loading: false,
      columns,
      locale: {
        emptyText: '数据加载中...',
      },
    }
  },
  computed: {
    noData() {
      return this.data.length === 0
    },
  },
  watch: {},
  mounted() {
    this.getMyBusiness()
  },
  methods: {
    getMyBusiness: function () {
      this.loading = true
      getMyBusiness()
        .then((res) => {
          let jsonObj = JSON.parse(res.datas)
          for (let i = 0; i < jsonObj.length; i++) {
            let splitText = jsonObj[i].lzlcmc
            let textS = splitText.split('-')
            this.data.push({
              key: i,
              projectName: textS[0],
              applicant: jsonObj[i].jddxmc,
              college: textS[2],
              time: this.parseTime(jsonObj[i].lzsj.time),
              action: '查看',
              appid: jsonObj[i].id,
            })
            this.index++
          }
          this.loading = false
        })
        .finally((f) => {
          this.locale.emptyText = '暂无数据'
        })
    },
    getMyHtml() {
      getMyHtml().then((res) => {
        console.log(res)
      })
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
    },
    resetList() {
      this.data = []
      this.pagination = {
        showSizeChanger: true,
        total: 0,
      }
      this.loading = false
    },
    parseTime(value) {
      return moment(parseInt(value)).format('YYYY-MM-DD hh:mm:ss')
    },
    openUrl(url2) {
      window.open('http://s.bitzh.edu.cn/manage/workflow/workflow?index&gzllzid=' + url2)
      //this.visible = true
      console.log('打开网址', url2)
    },
  },
}
</script>

<style lang="less">
.TableList {
  background: #fff;
  padding: 30px;
  .button-view {
    margin-bottom: 30px;
    button {
      margin-right: 20px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
